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Introduzione 

Il rapporto con gli studenti diventa ogni semestre più complesso a causa delle 
armi di distrazione di massa (smartphone e social) che rendono i discenti dei 
corsi spesso disattenti e de-concentrati. È per questo motivo che ho deciso - per 
il corso che svolgo a Pisa presso l’Accademia di Belle Arti Alma Artis - di 
realizzare un un breve iper-testo che sia riferimento didattico utile soprattutto per 
evitare incomprensioni su quali principi e know-how porre maggiore attenzione 
ed al tempo stesso - grazie proprio alla sua natura di ipertesto - possa offrire 
possibilità di approfondimento in autonomia. 

Il testo può essere liberamente reperibile e condivisibile dai repository di 
Archive.org e si può leggere nella sua formato in PDF su carta o su qualsiasi 
computer-software capace di interpretare il diffusissimo Portable Document 
Format oppure in formato ePub su qualsiasi lettore di ebook. Lo specifico 
formato multimediale epub3 permette su alcuni software multi-piattaforma come 
Readium oppure Gitden di usufruire anche dei contributi audio e video inclusi 
mentre per i link di approfondimento è necessario usufruire della connessione ad 
Internet. 

Tutte le risorse indicate in questo ipertesto possono essere monitorate nelle loro 
versioni aggiornate sul sito Web http://www.infoaccessibile.com dove è possibile 
trovare anche altri riferimenti e strumenti per approfondire le tematiche 
affrontate (questo testo è volutamente sintetico al solo scopo di sottolineare 
aspetti e procedure essenziali in materia) mentre sul blog 
https://scaccoalweb.wordpress.com è possibile seguire delle riflessioni in 
continuo aggiornamento sulle tematiche trattate. 

A volte nel testo viene utilizzata della terminologia tecnica e, soprattutto in caso 
di primo utilizzo, viene preceduta dal segno esclamativo ! ed evidenziata in 
grassetto: può essere interpretata in apposito glossario delle Iparole chiave 
Abracadabra in ossequio ad una mia teoria 

http://neural.it/it/2015/12/abracadabra-a-query-is-not-a-query/ di utilizzo e 
valorizzazione di parole e concetti particolarmente strategici nella ! UX digitale. 
La scelta di privilegiare formati e linguaggi allo stesso tempo open-source e 
standard va incontro ad una mia personale convinzione - maturata grazie al 
confronto con attivisti del software libero e della libera condivisione della 
conoscenza - di offrire a chi ancora deve crescere e studiare strumenti versatili 
ma non particolarmente onerosi (quanto meno sotto il profilo economico) ed al 
tempo stesso di abituarsi a lavorare per produrre contenuti e manufatti (pur 





digitali) orientati ad una conservazione a lungo termine. 



Programma del corso ESTETICA DELLE 
INTERFACCE 


(tratto da https://www.almaartis.it/estetica delle interfacce ) 


Codice: 

ABTEC42 


Crediti „ 
Formati 1 ^ 6 ’ 


Corso: 

GMD 


Docente: (GraphiAnno: 

Enrico Bisenzi & 2 

Multimedia 

Design) 

Comprendere la complessità 
tecnico/architettonico/semantica della 
progettazione delle interfacce digitali sviluppando 
un pensiero critico originale relativo al continuo 
Obiettivi °l vere dei media. Apprendere i concetti di base 
formati\H ecessàY ^ P er P r °gettazione, realizzazione e 
gestione di un'interfaccia digitale o di un suo 
eventuale restyling. Approfondire gli aspetti di 
usabilità e visibilità secondo un criterio user 
oriented. 


Opportunità e problematiche derivanti dalla 
progettazione di un'interfaccia secondo i principi e 
gli accorgimenti più utili delle linee guida del 
Material Design di Google. Introduzione a 




linguaggi che 'comandano' il funzionamento del 

n digitale ovvero html-css-javascript per quanto 

Programmi J r r M 

riguarda struttura-layout-funzionamento delle 
interfacce con particolare attenzione agli aspetti di 
accessibilità, usabilità, internazionalizzazione, 
archiviabilità ed adattabilità cross-mediale delle 
interfacce da realizzare. Disamina dell'utilizzo 


ottimale di parole e contenuti da utilizzare e 
valorizzare nel design di un'interfaccia digitale 
anche in un'ottica di Sentiment Analysis & Brand 
Awareness. 


Material Design Guidelines. Google.Raskin J., 
Interfacce a misura d'uomo, Apogeo.UX Design, 
ebook by UXPin.Articoli e news di 
approfondimento del Nielsen Norman 
Group.Articles, best practices & tutorials on 


Testi Internationalization (il8n) W3C 

. .. Activity.Includification - AbleGamers 
consig l ^ )un( j at j on > s G ame Accessibility 


Guidelines.Michele Diodati. Accessibilità Guida 


completa. Apogeo.Progettare siti web standard di 
Zeldman - Pearson Editore.Manuale per la 
progettazione digitale. A cura di Gabriele Lunati e 
Giovanni Bergamin (Regione Toscana). 



Preparazione al corso: strumenti utili e definizione di 
OBIETTIVO COMUNICATIVO E TARGET DI 
RIFERIMENTO 

Software o servizi online utili di 
riferimento 

Se la chiavetta USB che ho portato in classe non funziona oppure non avete a 
disposizione un device con connessione Universal Serial Bus allora scaricate da 
Internet ed installate i seguenti software ! Open Source che vi saranno utili 
per il proseguimento del corso... 

Gravit 

https://designer.io 

https://gravit.io 

Gravit è sia un servizio online che un software multi-piattaforma abbastanza 
intuitivo e potente per il design di interfacce digitali. 

Libre Office 

https://it.libreoffice.org 

Libre Office deriva da Open Office ed è un ottimo strumento per editare svariate 
tipologie di documenti in formato office (pdf compresi e tutto ciò che potete 
immaginare normalmente realizzato con Word-PowerPoint-Excel-eccetera). 
Risulta particolarmente utile in fase di scrittura contenuti testuali, per 
correggergli ortograficamente in maniera agevole e per strutturarli in maniera 
corretta al fine di esportarli in altri formati come ad esempio per il formato ePub 
grazie ad estensioni quali Writer2Html 
https://extensions.libreoffice.org/extensions/writer2xhtml 

Atom 

https://atom.io Uno (dei tanti) editor open-source per linguaggi del web (epub 
compreso) ed uno dei pochi particolarmente versatili, facili da utilizzare e ricco 
di plugin (packages) per seguire le continue evoluzioni dei linguaggi digitali. 

MockFlow 

https://www.mockflow.com Ambiente di sviluppo e prototipazione per app 
(necessità di flash). 








inVISION 


https://www.invisionapp.com 

Social Network per la condivisione a livello internazionale di prototipi di design 
digitale. 

AVVERTENZA PER L’ESERCITAZIONE 

Questa dell’installazione dei software e dell’iscrizione ai servizi online indicati è 
UNA ESERCITAZIONE e va affrontata con l’impegno che merita 
un’esercitazione, nello specifico bisogna porre attenzione a: 

• individuare l’estensione-formato file di competenza per il proprio sistema 
operativo; 

• obbligatoriamente leggere (readme) le istruzioni che eventualmente su 
qualche ! sistema operativo indicano procedure eventualmente 
complesse di installazione del software ivi compreso eventuali librerie- 
dipendenze (diciamo software aggiuntivo) eventualmente necessario per 
l’installazione; 

• installare eventuali pacchetti supplementari indicati in fase di installazione 
per poter usufruire di documentazione di supporto (help) oppure di 
interfacce scritte nella propria lingua-cultura di appartenenza; 

• nel caso di sottoscrizioni di servizi online fare attenzione ai requisiti di 
iscrizione (anche se gratuiti) ed in particolare alla regolamentazione 
inerente la gestione e conservazione dell’account attivato (compresa 
eventuale possibilità di eliminazione od esportazione dati prodotti in 
svariati formati) e soprattutto le regole inerenti input e condivisione dei 
materiali immessi nella piattaforma. 



Obiettivo comunicativo e target di 
riferimento 

Fermo restando la più completa libertà di scelta nell’individuare l’interfaccia da 
creare o migliorare (restyling) che potrebbe essere ad esempio: 

• interfaccia di propria inventiva da progettare ex novo; 

• interfaccia attualmente esistente anche di proprietà di terze parti da 
analizzare sotto il profilo della corretta User eXperience; 

• implementazioni di interfacce della stessa Alma Artis quali il sito Web 
oppure l’Open Day Virtuale in funzione di Sdebugger sempre a livello di 
corretta UX... 

è molto importante saper decidere o saper assegnare ad un’interfaccia digitale sia 
l’OBIETTIVO COMUNICATIVO così come il TARGET DI RIFERIMENTO 
più appropriati. 

Obiettivo comunicativo 

L’obiettivo comunicativo indica perché si realizza un’interfaccia (i perché e le 
domande fanno sempre bene a un progettista di qualsivoglia interfaccia) e le 
finalità di un’interfaccia sono uno degli aspetti che influenzano le linee guida di 
sviluppo progettuale del design digitale in tutti i suoi aspetti e per tutte le sue 
componenti, principali ma anche secondarie. Con la mia interfaccia devo 
narrare? Promuovere? Vendere? Istruire? E poi volendo entrare maggiormente 
nello specifico... Cosa? Come? Quando? 

Target di riferimento 

L’altro aspetto che necessariamente influenza le linee guida di sviluppo 
progettuale del design digitale in essere è l’individuazione del target di 
riferimento ovvero... per CHI stiamo sviluppando la nostra interfaccia digitale? 
Ovviamente tutto è relativo rispetto al differente target di riferimento individuato 
che potrebbe avere varianti significative come quelle inerenti l’età, il genere, il 
livello di istruzione, lingua e cultura di provenienza eccetera. 



Esempio 

Gli esempi come al solito valgono molto più di mille parole ed allora ecco a voi 
il fantastico video del The Tokyo Shimbun "Share thè Newspaper xvith 
Children... 


00 : 00 / 00:00 


Il problema dei quotidiani su carta di non saper intercettare le giovanissime 
generazioni viene affrontato da un quotidiano giapponese in maniera 
assolutamente creativa realizzando una serie di realtà aumentata (AR) che il 
giovane lettore giapponese può visualizzare inquadrando gli articoli del 
quotidiano che sono opportunamente supportati da una trascrizione semplificata 
adeguata per grammatica e linguaggio ad un bambimo: la scrittura semplificata 
hirigana unitamente a sintesi adeguate ed animazioni divertenti rendono la 
lettura di un quotidiano un’esperienza appagante anche per un lettore di nove o 
dieci anni. In questa maniera con un prodotto cartaceo traslato al digitale (con 
una strategia dunque cross-mediale ) si raggiunge l’obiettivo comunicativo di 
informare coinvolgendo più target di riferimento. 















Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il software 
installato e servizi a cui si è completata la propria iscrizione oppure alternative 
equivalenti già in proprio possesso, una descrizione sommaria dell’interfaccia 
digitale da creare ex-novo oppure da ri-modellare (restyling), l’obiettivo 
comunicativo e il target di riferimento. 



Nomi, parole e contenuti da utilizzare 

Un’interfaccia (digitale) affinché funzioni deve essere nominata in maniera 
efficace ma anche deve essere assemblata da componenti (come fossero dei 
mattoncini Lego...) validi e soprattutto legittimamente utilizzabili: cominciamo 
dal nome... 

Nome = Brand 

Quale nome dare alla nostra interfaccia? Sembra un aspetto secondario ed invece 
è una scelta strategica quella dell’assegnare un nome che ovviamente può e deve 
essere un brand ovvero un marchio (deriva dal marchiare a fuoco il bestiame 
che così poteva essere rivendicato come proprietà...) che a sua volta deve 
possedere alcune qualità anche quando traslato nella sua forma di Slogo ovvero 
deve essere... 

Originale 

Bisogna essere originali in termini assoluti o quanto meno rispetto al proprio 
settore di riferimento altrimenti si corre il rischio di non essere facilmente 
reperibili e contattabili tramite ! motori di ricercae social network 
subendo così la concorrenza di competitor già affermati e quindi già visibili. Per 
verificare l’originalità del nome che ci è venuto in mente è possibile usufmire 
dei seguenti servizi di ricerca online: 

https://knowem.com per verificare l'originalità dell’account social equivalente 
(anche se può non essere identico beninteso) al brand ipotizzato; 

https://www.godaddy.com/domains/domain-name-search come uno fra i tanti 
servizi di verifica dell'originalità del dominio Web equivalente (anche se può non 
essere identico beninteso) al brand ipotizzato; 

http://www.wipo.int/branddb/en/ per verificare l’assenza di tutele giuridiche 
rispetto al brand ipotizzato. 





Significativo 

Non è facile capire il valore culturale di un nome ipotizzato e ancor più a livello 
cross-cultural ma uno dei metodi più interessanti è quello di utilizzare il 
CANALE IMMAGINI di motori di ricerca come Google ma anche Bing, 
Yandex, Naver o Baidu per capire a quale immaginario può appartenere la scelta 
di un nome di brand ipotizzato. 


Comprensibile e facilmente comunicabile 


Un brand deve essere comprensibile e facilmente comunicabile in qualsiasi 
modo ed è per questo che è importante controllare anche la sua pronuncia 
fonetica magari attraverso la piattaforma di scambio social delle pronunce 
diffuse in tutto il mondo come https://it.forvo.com/pronounce/ 


OForvo 

All thè words in thè worid. Pronotinced. 


Aggiungi parole 


Pronuncia 


> Accedi + Iscriviti 


eLearning 


Lingue 

Guide 

Categorie 

Eventi 

Utenti 






Pronuncia 

1 

P 

I_ 


Pronuncia 


Scegli una lingua per vedere le pronunce in sospeso solo per quella lingua. 


Lingua: 


Scegli la lingua 


+ Aggiungi 
nuove parole 


O dare uno sguardo alle ultime 50 parole aggiunte per la pronuncia. Forse potresti aiutare a 
pronunciarle tu stesso. 


Parole 

o [yue) 

O Telegrafenstange [de] 
O *1(^3) [ja] 

O schismless [en] 


Frasi 

O ZU Felde [de] [Altro] 

O gehen um etwas [de] [Altro] 
O einen Bus kriegen [de] [Altra] 


» Pronunce in 
» Pronunce in 
» Pronunce in 
• Pronunce in 
» Pronunce in 
» Pronunce in 
» Pronunce in 
» Pronunce in 


Tedesco 

Tatarico 

Russo 

Inglese 

Giapponese 

Francese 

Spagnolo 

Portoghese 


Esprimere Identità 

Con i suoi font utilizzati e la sua carica comunicativa iconica deve poter 
trasmettere l’identità di ciò che deve rappresentare a pieno titolo ed in maniera 
efficace. 


Adattivo 

Deve potersi adattare - mantenendo la propria capacità comunicativa - ai diversi 
ambiti (anche dimensionali) in cui essere collocato in un’ottica di filiera 
pubblicitaria ! cross-mediale: in ambito digitale risulta sicuramente 
importante una sua corretta interpretazione all’interno di uno spazio assimilabile 
ad un piccolo quadrato o cerchio essendo spesso questi utilizzati in ambito social 










soprattutto a livello di gestione grafica dei loghi. 

Corredato di eventuale Payoff 

Associabile ad un brand è poi un payoff - ovvero uno slogan come si sarebbe 
detto una volta - che non è altro che una (breve) frase capace di esprimere il 
mood del brand con il quale l’utente deve poter essere invogliato a sintonizzarsi 
spontaneamente. 

Un esempio geniale del passato (anni ‘50-’60) quello della Vespa della Piaggio 
che con la frase CHI VESPA MANGIA LE MELE attirava la curiosità e 
l’attenzione del suo target di età di riferimento più importante - quello 
giovanilistico - legato ad istinti spontaneamente trasgressivi e. quindi, in quegli 
anni, ancora facilmente riconducibili simbolicamente al primo gesto trasgressivo 
dell’essere umano di tradizione culturale cristiana ovvero l’aver colto la mela... 


Google 


chi vespa mangia le mele 


o Q. 


Tutti Immagini Video Shopping Notizie Altro Impostazioni Strumenti 


SafeSearch attivo» 



























Parole = Gergo 

Una volta identificato il target di riferimento è necessario cominciare a capire 
quale può essere il relativo gergo di riferimento ovvero un set di parole che viene 
colloquialmente utilizzato (-gergo) dal medesimo target : il glossario-dizionario 
derivante da uno studio-analisi del genere è fondamentale per poi decidere il 
nome delle componenti dell’interfaccia da sviluppare quali ad esempio: 

• parole e contenuti testuali; 

• voci di menù; 

• nomi di eventuali elementi strutturali (immagini ad esempio). 

In assenza di altre possibilità di indagine o riflessione è possibile utilizzare uno 
strumento come https://trends.google.it/trends/?geo=IT che consente di trovare 
in maniera eventualmente geo-referenziata tendenze, nomi di tendenza e nomi 
simili a quello dell’argomento o della parole sotto osservazione... 


= GoogleTrends 

Italia 


Afghanistan 

Scopri quali ricerche si 

Albania 

fanno nel mondo 

Algeria 

Altre isole americane del Pacifico 

Inserisci un termine di ricerca o un argomento 

Andorra 


Attenzione ai falsi positivi 

Nell’esame delle parole relative o adiacenti (semanticamente) ad una parola data 
è importante fare attenzione all’eventuale emergere di falsi positivi ovvero a 
parole o interpretazioni semantiche apparentemente affini ed utili, ma che, in 
realtà, non appartengono al nostro ambito significativo specifico per cui la parola 
“responsive” può essere utilizzata nel design digitale quanto in ambito politico o 
educativo... 






X 



• responsive 


Tutto il mondo. Ultimi 12 mesi 


Argomenti correlati... In aumento » ♦ < > Query associate 


In aumento 


± <> < 


1 ReactJS - Argomento 


responsive industries 


2 Cultura - Argomento 


2 responsive education Solutions 


3 center for responsive politics 


4 responsive checker 


5 datatable responsive 


il Sentiment 

Studiare la tendenza e l’utilizzo sotto il profilo quantitativo di determinati 
termini può essere utile anche per determinare il sentiment ovvero se un 
determinato argomento o brand viene percepito in maniera positiva o negativa 
associandolo a terminologia con particolari significati positivi o negativi. 
Numeri e tendenze del sentiment possono aiutare a capire il grado e la qualità di 
consapevolezza di un marchio ovvero la cosiddetta brand awareness. 






Contenuti = Repository = Licenze 

Per trovare ispirazioni o veri e propri contenuti riutilizzabili anche liberamente 
ed anche a fini commerciali è possibile fare riferimento alle licenze creative 
commons ed ancor più ad alcuni ! repository di contenuti digitali che 
contengono anche opere che sono riutilizzabili liberamente in quanto protette da 
licenze cosiddette di pubblico dominio o PD in inglese (Public Domain). Uno 
dei repository fra i più interessanti (ma attenzione contiene anche materiale 
coperto da tradizionale copyright...) è https://www.europeana.eu/portal/it dove si 
possono trovare decine di milioni di opere digitali molte delle quali riutilizzabili 
a vario titolo... 


9 


europeana 

collections 


Collezioni’ Esplora’ Esposizioni’ Blog’ 


I NOSTRI SITI 


0 LINGUA- 



Aggiungi un termine di ricerca 


Esplora 58,245,986 opere d'arte, manufatti, libri, video e suoni provenienti da tutta Europa • . , 

YyV. 

, •; v \ 

- 

1 ’’ *• ’ 

•*, ' y , . 

f •'Y: 

\ * « 4* ‘ 

• v i* V ' * * 

-/ > '* 

Stili Ufe with Wild Strawberries (detail), 1705, Adriaen Coorte 


t 4 1 ^ 

/ V > Mauritshuis 


'.V'; •' ' > • > 

, © Public Domain E? 


Europeana non è solo un fantastico magazzino di opere digitali messe a 
disposizione da una miriade di istituzioni culturali europee ma anche un’ottima 
palestra per esercitarsi nel comprendere il funzionamento delle licenze Creative 
Commons (CC): queste ultime possono essere utilizzate con piena validità 
giuridica per proteggere o viceversa diffondere i contenuti della propria 
interfaccia o la propria interfaccia nella sua integrità scegliendo fra le seguenti 
opzioni a disposizione su https://creativecommons.org 


• permettere o meno lo sfruttamento commerciale dell’opera 

• permettere o meno la possibilità di modificare l’opera 

• in ogni caso attribuire correttamente l’opera al suo autore citandone 
correttamente il titolo e la licenza di distribuzione assegnatagli 


Una scelta molto diffusa fra i giovani artisti che devono emergere e farsi 
conoscere è quella ad esempio della licenza Attribution-NonCommercial- 
NoDerivatives che oltre all’obbligatoria attribuzione si permette a chiunque di 









distribuire l’opera ma senza poterla modificare e specularci commercialmente. 

Allow adaptations of your work to be shared? 

© 

O Yes [0] No O Yes, as long as others share alike 

Allow commercial uses of your work? 

© 

O Yes O No 


© 

Selected License 


Attribution-NonCommercial-NoDerivatives 4.0 International 






Meta Dati 


Un’opportunità importantissima per valutare oppure marchiare le proprie opere 
digitali con descrizioni apparentemente invisibili ad una lettura superficiale sono 
i meta dati ovvero quelle informazioni descrittive (anche inerenti la licenza di 
distribuzione dell’opera) che possono peraltro essere svelati peraltro grazie a 
svariate procedure e strumenti quali: 

• il complesso strumento software Exi^Tool che può essere peraltro sostituito 
da exif Viewer Online quali http://exif.regex.info/exif.cgi 

• modalità specifiche di visualizzazione normalmente attivabili da qualsiasi 
software (di grafica) 

• il browser Vivaldi https://vivaldi.com 







Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) brand ed 
eventuale payoff scelto per l’interfaccia in sviluppo, un elenco di almeno dieci 
parole che possono essere assimilate al gergo del target di riferimento preso in 
considerazione, la tipologia di licenza con la quale vuoi proteggere o diffondere 
contenuti ospitati dalla tua interfaccia o l’interfaccia stessa nella sua integrità. 



Accedere è il primo passo 

L’accessibilità viene spesso percepita come una problematica che riguarda 
(poche) persone disabili sottovalutando alcuni aspetti fondanti della nostre 
possibilità percettive per cui siamo tutti diversi e tutti possiamo percepire 
l'informazione (digitale) in maniera diversa. Occuparsi dell’accessibilità può 
sembrare prematuro in una fase iniziale di design digitale ma in realtà è 
importante prendere subito conoscenza delle esigenze di accessibilità perché può 
rendere il lavoro di progettazione di maggiore qualità in generale fin da subito e 
sopratutto far risparmiare interventi che, se fatti a posteriori, esigono sforzi 
operativi molto più ingenti di quanto sarebbero se venissero realizzati in fase 
iniziale. 



Percezioni 

Video 

Il famoso esperimento del vestitino bianco/oro o nero/blu ha catturato 
l’attenzione di giovani frequentanti i social e se la (possibile) spiegazione si 
fonda su diverse capacità ed interpretazioni sensoriali condizionate anche da 
fattori ambientali (colori-sfondi adiacenti e condizioni di illuminazione...) ci ha 
convinti che ebbene sì siamo diversi gli uni dagli altri dal punto di vista di 
possibile percezione ed elaborazione sensoriale e che quindi la questione 
dell’accessibilità ci riguarda (tutti nessuno escluso) ed eccome! 
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Audio 

Se l’esperimento del vestitino non vi ha convinto allora provate a livello audio a 
capire se percepite Yannv o Laurei dal video ospitato su Reddit e che dimostra 
(dai commenti ospitati) come anche la percezione audio può differire 
notevolmente... 


00 : 00 / 00:00 








Segui il cuore o "follow thè money" 

Un’altra questione sollevata dall’accessibilità spesso disattesa riguarda la doppia 
valenza: da una parte etica e dall’altra commerciale. Da un punto di vista morale, 
dovrebbe essere sentita da tutti noi l’esigenza di comunicare con qualsiasi 
persona-target indipendentemente dal tipo di limitazione sensoriale o funzionale¬ 
fisiologica che può caratterizzarla, da un punto di vista di convenienza 
commerciale, potreste riflettere su quanto siano ampiamente diffuse le disabilità 
a livello statistico ed addirittura, cinicamente parlando, in mercati importanti 
come quello degli USA (fonte https://www.includification.com f dove su una 
popolazione di 325 milioni di abitanti superano i venti milioni i veterani di 
guerra di cui un quarto affetti da una qualche forma di disabilità (senza prendere 
in considerazione i disabili civili). 


Se il tuo cuore non ti convince, “follow thè money” e ragiona in termini di 
ampliamento di mercato... 







Chi-cosa ci guadagna 
dall'accessibilità 

Non sono sole le persone disabili a trarre vantaggio di contenuti ed interfacce 
accessibili, ma è ampio lo spettro di chi può migliorare la propria esperienza 
utente rispetto ad un’interfaccia utente... proviamo a stilare un sintetico elenco: 

• noi tutti (usufruire di un’interfaccia accessibile è più appagante e comodo di 
usufruire di un’interfaccia non accessibile, così come per salire ad un 
settimo piano di un palazzo prendo l’ascensore per comodità ed efficienza 
anche se non viaggio con una sedia a rotelle); 

• le persone disabili (anche se è impossibile realizzare un’interfaccia 
perfettamente accessibile per qualsiasi tipo di disabilità con un’unica 
versione); 

• i motori di ricerca come Google (non a caso definito il più potente non 
vedente del pianeta Terra dato che privilegia i siti Web accessibili percepiti 
esattamente come li percepirebbe una persona non vedente attraverso 
l’ausilio degli ! screen- reader); 

• i social network come Facebook così come gli assistenti vocali e qualsiasi 
altra tipologia di bot interessato ad interpretare l’informazione digitale 
percepibile correttamente. 



Informazione ed interfaccia 
accessibile 


La questione dell’accessibilità è estremamente complessa: ad esempio per il Web 
esistono raccomandazioni internazionali note come le WCAG - Web Content 
Accessibility Guidelines il cui secondo livello è stato individuato come 
riferimento da molte normative nazionali (italiana compresa) così come esistono 
linee guida per ogni tipologia di settore specifico come ad esempio le fantastiche 
http://gameaccessibilityguidelines.com che ci guidano nelle raffinate soluzioni 
adottate da tutti i principali videogame commerciali per ampliare il più possibile 
la propria audience cercando di trovare soluzioni adatte alle diverse 
caratteristiche delle persone con disabilità. 

Per esempio 1’audio-video-gioco Nicolas Evmerich Linquisitore offre svariate 
soluzioni quali la pissibilità di attivare uno speciale pannello controllo dialoghi 
in cui, nella versione maggiormente accessibile pensata per le persone 
dislessiche, sono ben evidenti i controlli dell’audio-video, il focus del mouse è in 
evidenza ed il font utilizzato per i sottotitoli è decisamente più leggibile rispetto 
alla versione standard. 



In definitiva se l’interfaccia o i contenuti risultano accessibili per le diverse 
esigenze delle persone disabili allora non c’è necessità di trovare soluzioni 
supplementari specifiche che in gergo sono denominate alternative testuali. 
Alcuni aspetti di accessibilità travalicano l’utilizzo di alternative testuali ed un 
paio di esempi importanti sono: 

• evitare di assegnare in maniera esclusiva del valore comunicativo 
significativo ad un colore; 

• evitare intermittenze animazioni ovvero mutamenti repentini di oscurità e 
luce che abbiano delle caratteristiche potenzialmente pericolose per chi 






soffre di epilessia (intermittenze superiori a tre battiti al secondo costituite 
da aree significative dello schermo, ancor più gravi se comprendenti il 
colore rosso). 

Se viceversa l’interfaccia si deve presentare per motivi grafici senza essere 
dotata di informazione testuale facilmente interpretabile dagli ausili come gli 
screen-reader od altra tipologia di comunicazione facilmente interpretabile allora 
è necessario dotarsi di... 



Alternative (testuali?) 

Sono dette alternative e perlopiù alternative testuali tutte quelle soluzioni che 
facilitano la comprensione e la fruizione di un’interfaccia e di un contenuto 
digitale da parte di una persona disabile ma in realtà sono numerose le soluzioni 
redazionali e tecnologiche disponibili per rendere un’interfaccia ed il suo 
contenuto accessibile e non tutte, come vedrete, sono testuali... 

Linguaggio dei Segni 

Partiamo dal difficile e cerchiamo di capire come la maggior parte delle persone 
sorde preferisca usufruire del linguaggio dei segni e che il medesimo differisce 
per ogni Paese del mondo similmente a come differiscono i linguaggi naturali a 
noi noti - per esempio, fra una persona di lingua spagnola ed una di lingua 
giapponese. Una versione accessibile per persone sorde di un’interfaccia digitale 
dovrebbe essere dotata di appositi video realizzati con la lingua dei segni relativa 
al target geografico di pertinenza: se volete vedere un esempio italiano curiosate 
nel vlog (video-blog) realizzato da persone sorde all’indirizzo web 
https://vlogsordi.blogspot.com 



Guardate i video-esempi della traduzione di viaggiare in lingua ucraina e poi in 
lingua svedese tratti da https://www.spreadthesign.com/it.it/search/ 








00 : 00 / 00:00 



(la traduttrice ucraina fa un segno deciamente diverso da quella svedese 
utilizzando la prima addirittura due mani per comporre una tipologia di gesto e 
la seconda solo una...) 

Comunicazione Aumentata e Alternativa 

Continuiamo con esempi poco noti in tema di alternative accessibile, ma proprio 
per questo importanti come lo sono i siti web ed ebook nonché applicazioni di 
Comunicazione Aumentativa e Alternativa particolarmente utili per persone 
con deficit cognitivo come le persone autistiche che sono avvantaggiate da 
semplici informazioni costituite da testo semplice e chiaro accompagnato da 
immagine esplicativa. 

Alternative testuali vere e proprie 



Molte persone disabili come ad esempio non vedenti, non udenti e persone 





























dislessiche possono trarre vantaggio da informazione testuale che sia una valida 
alternativa (equivalente) a ciò che viene percepito come audio, video od 
immagine in alcuni casi grazie anche all’ausilio di screen-reader che possono 
trasformare il testo in informazione percepibile tramite comunicazioni audio o 
braille. 


Immagini 


Le immagini per poter essere correttamente interpretate devono essere associate 
a testo equivalente, ma ove non è possibile è necessario nominarle in maniera 
significativa e/o dotarle di apposito attributo alt che le descrive opportunamente 
nel caso di editing di siti Web oppure usufruire delle opzioni di accessibilità 
nell’editing delle immagini per i social per aggiungere adeguate alternative 
testuali (descriptive alternative text). 

Audio-Video 
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Cerca in HTML 


<img alt="autore Enrico Bisenzi" src=" ../imaaes/users/avatar-061. 


Nel caso di audio-video è fortemente consigliabile accompagnare il medesimo 
da una descrizione testuale equivalente, ma se, ad esempio nei video, le linee 
grafiche non consentono di accompagnare l’oggetto multimediale con testo 
equivalente di accompagnamento allora è possibile usufruire di standard quali 
Web Video Text Tracks da applicare tramite opportuno codice di markup di 
sottotitolazione sincronizzata : < v i d e o 


src="video_da_sottotitolare.ogv"><track 
kind="subtitles" src="sottotitoli-it.vtt" srclang="it" 
label="italiano" defaultxtrack kind="subtitles" 
src="sottotitoli-en.vtt" srclang="en" label="english"> 
</video> 


Esempio di : [idstring] [hh : ]mm : ss . msmsms --> 

[hh: ] mm:ss.msmsms [cue settings] Text stringCue-8 
00:00:52.000 --> 00:00:54.000 <v Emo>I don't think so. 
<c.question>You?</c></v>Cue-9 00:00:55.167 --> 
00:00:57.042 <v Proog>I'm Ok.</v> 




Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il colore del 
vestitino ed audio che hai percepito, le caratteristiche eventuali di inaccessibilità 
dell’interfaccia che hai progettato o in fase di restyling (quali sono e per quali 
disabilità? come pensi si potrebbe risolverle?). 



Wireframe e Workflow 

Da un punto di vista di architettura dell’informazione si può definire il 
wireframe come il disegno schematico e strutturale di un’interfaccia 
relativamente alle sue dinamiche di utilizzo. 

Grazie a strumenti come https://wireframe.cc è possibile realizzare un’idea di 
come si possa disegnare un ’idea o come si potrebbe dire in altri termini uno 
sketch di un’interfaccia disegnando uno schizzo-bozza di quello che potrebbe 
essere l’idea di progetto o di restyling dell’interfaccia in oggetto di lavorazione, 
magari adattabile alle varie tipologie di device e relative risoluzioni (desktop, 
mobile, eccetera) attraverso il disegno schematizzato dei suoi componenti. 



□ □OH = =GiTin 



La medesima bozza-idea di interfaccia schematizzata può essere riprodotta in 
varie schematizzazioni esponendo linee di collegamento fra funzioni in 
successioni che possono rendere l’idea di quale può essere l’esperienza utente 
(User eXperience) di un ipotetico utente ovvero il suo flusso di utilizzo o 
workflow. Ovviamente più sono le ipotesi di utilizzo differente di una medesima 
interfaccia e più workflow devono essere ipotizzati salvo sottoporli poi a 
meccanismi di verifica post-produzione (vedremo più avanti cosa vuol dire e 
come si eseguono queste procedure di controllo). 










Esempio 

di Wireframe denominato Time Bank Wireframe - iteration realizzato a cura di Mark Congiusta 
(Attribution 2.0 Generic https://creativecommons.Org/licenses/bv/2.0/) nel quale sono ravvisabili alcuni 
frammenti di workflow relativi a funzionalità specifiche ipotizzate. 




































































































































































Ispirarsi a case history di successo 

Una buona regola può essere quella di ispirarsi a case history di successo perché 
possiamo pensare di avere l’idea più originale del mondo a livello di design di 
interfaccia ma è più saggio rimanere umili e vedere cosa è stato realizzato e cosa 
ha avuto successo nel nostro stesso settore d’intervento prima di cominciare a 
progettare non fosse altro per trovare ispirazioni e testare la bontà delle nostre 
(ispirazioni). 

Studiare i propri competitor 

Considerate che, magari, nel medesimo settore di intervento c’è chi ha già 
investito creatività, tempo e denaro per raggiungere gli stessi obiettivi ed allora 
perché non studiare la propria concorrenza? Un atteggiamento umile ed analitico 
può far risparmiare tempo e denaro salvo riservarsi la libertà di trarre ispirazioni 
ed adattare intuizioni alla propria creatività e capacità di progettazione. 



È una questione di Usabilità 

Il tutto gira intorno al concetto di usabilità ovvero a quanto può essere 
performante la nostra interfaccia nel farsi utilizzare da uno determinato target di 
riferimento, rispetto ad un obiettivo comunicativo di carattere generale ma anche 
relativamente a determinati compiti (task) specifici che la stessa utenza può 
svolgere sulla nostra interfaccia come trovare un’informazione, contattare un 
helpdesk, valutare o acquistare un prodotto o un servizio, apprendere un 
determinato know-how. 

Bisogna, più in generale, riuscire nel difficile intento di conquistare l'utenza 
finale in termini di apprezzamento ed attenzione ed imporre il proprio 
linguaggio comunicativo e la propria logica funzionale di utilizzo 
dell’interfaccia stessa. 

Per far questo bisogna però essere coscienti di quali sono gli accorgimenti 
necessari per: 

• evitare di perdere l’utenza finale che, statisticamente, impiega due-tre 
secondi prima di decidere se continuare o meno nel provare l’interfaccia 
digitale che ha approcciato; 

• conoscere le regole generali di usabilità di una qualsiasi interfaccia digitale. 
È necessario sempre sapersi calare nei panni dell'utente finale (target) e 
prevedere quali potrebbero essere gli elementi critici che potrebbero portare il 
nostro utente finale ad abbandonare subito la nostra interfaccia, in particolare 
evitando: 

• contenuti non strutturati logicamente e conseguenti meccanismi di 
navigazione inefficaci (vale sempre la regola che in tre click-passaggi 
devono poter svolgere qualsiasi funzione specifica o arrivare ad acquisire 
qualsiasi informazione specifica contenuta nell’interfaccia); 

• troppa pubblicità o pubblicità eccessivamente invasiva; 

• audio o video che partano automaticamente senza possibilità di controllo a 
posteriori; 

• meccanismi di registrazione obbligatori posizionati all’inizio 
dell’esperienza utente; 

• contenuto e grafica noiosa o scarsamente leggibile; 

• contenuti non aggiornati. 

Viceversa è sempre importante tenere a mente le principali euristiche di Nielsen 



(padre moderno dell’usabilità digitale) che consigliano di: 

• tenere sempre informati gli utenti su cosa sta accadendo (se, ad esempio, 
stai facendo scaricare qualcosa è opportuno far sapere all'utente quanto 
manca al completamento del download); 

• iconicamente e metaforicamente mantenere sempre una connessione logica 
con la realtà così come normalmente percepita (uno STOP ad un’azione 
potrebbe, ad esempio, essere iconicamente rappresentato da un semaforo 
rosso - problemi di accessibilità a parte); 

• far mantenere il controllo delle azioni all’utenza finale consentendo, ad 
esempio, di annullare operazioni in corso o tornare sui propri passi; 

• l’informazione e le soluzioni di design devono essere ridotte al minimo per 
non mettere in difficoltà l’utenza finale. 



Puntare ai risultati: cali to action 


Quel che conta sono dunque i risultati che in gergo vengono dett,e anche 
conversioni: se è una piattaforma che vende, ciò che conta cono i prodotti 
venduti; se è un’interfaccia per aumentare l’audience di riferimento quanti 
contatti si riescono a stabilire; se è un servizio di e-learning quanti studenti 
riescono a passare con successo le verifiche online. Inutile farsi irretire da altre 
metriche o ! analytics - comunque importanti per capire come interagisce 
l’utenza finale - quel che conta è il risultato finale (conversione) all’interno del 
cosiddetto funnel esperenzialel È fondamentale collocare il meccanismo di cali 
to action (bottone di acquisto, form di richiesta contatti eccetera) 
opportunamente nel diagramma di flusso (workflow) e su tutti i nodi funzionali 
di un'interfaccia affinché alla fine di un qualsivoglia esperienza dell’utente finale 
portata avanti con soddisfazione lo stesso utente finale sia messo in condizione 
di convertire e venga quindi chiamato all’azione. 


The Purchase Funnel 



Esempio di funnel esperienzale finalizzato ad un acquisto realizzato da BronHiggs 
(Creative Commons Attribution-Share Alike 4.0) nel quale si ipotizza con chiarezza 
di far prendere consapevolezza all'utente finale, conquistare il suo interesse, 
suscitare desiderio ed infine spingerlo all'azione. 




Feedback, comunque 

I meccanismi di feedback NON vanno necessariamente identificate con le 
call2action ma sono invece tutte quelle opportunità offerte dai meccanismi della 
comunicazione digitale quali: 

• chat; 

• messaggistica di vario tipo (compresa la posta elettronica); 

• forum; 

in cui sia possibile confrontarsi direttamente e senza alcun tipo di filtro con 
l’utenza finale dell’interfaccia realizzata. 

Sono opportunità per certi versi rischiose, vista la maleducazione diffusa online 
che sfiora atteggiamenti ingiustificati di hating vero e proprio, ma sono al tempo 
stesso dei meccanismi preziosi per valutare il proprio operato e ricevere 
segnalazioni sulla qualità del proprio operato. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il wireframe 
dell’interfaccia che si sta progettando o rimodellando (restyling) nonché il 
workflow rispetto ad almeno tre ipotesi di utilizzo dell’interfaccia stessa. 



I linguaggi del Web come matrice comune del digitale 

È importante prendere dimestichezza con i linguaggi del Web perché il Web ed i 
suoi linguaggi rappresentano la vera e propria matrice di tutta la filiera della 
Comunicazione Digitale. Sulla triade di linguaggi html-css-javascript (ed affini) 
è basata la comunicazione Web resa sempre più complessa e performante dallo 
sviluppo di ! f ramewor k e CMS (Content Management Systems), ma i 
linguaggi del Web si prestano ad essere traslati in maniera flessibile per 
realizzare a sua volta app o ebook che a volte parlano proprio la stessa tipologia 
di linguaggi come nel caso delle Web App oppure degli ebook di tipo ePub. 

HTML = Struttura 

L’HyperTextual Mark-Up Language è un linguaggio fondamentale da 
padroneggiare quanto meno nei suo fondamenti perché ci permette di scrivere 
ex-novo ma ancor più spesso analizzare ed eventualmente correggere (magari 
con il supporto di qualificate risorse tecniche) molte componenti fondamentali di 
un’interfaccia quali: 

• i meta dati attraverso i ! tag title e description che concorrono in maniera 
significativa a rappresentare le interfacce su molte piattaforme di 
indicizzazione e catalogazione a partire dai motori di ricerca; 

• tutte le denominazioni dei componenti strutturali di un’interfaccia quali 
ad esempio i tag di tipo h ma soprattutto i nomi di file e di cartelle che 
concorrono in maniera significativa a indicizzare le interfacce su molte 
piattaforme quali i motori di ricerca; 

• alcune componenti di schematizzazione che, naturalmente, anch'esse 
concorrono in maniera significativa a catalogare le interfacce su molte 
piattaforme come i motori di ricerca; 

• i tag div che rappresentano in qualche maniera i singoli mattoncini- 
componenti di un’interfaccia associabili ad una determinata classe o id che 
può essere a sua volta associata ad un determinata tipologia di layout o 
funzionamento; 

• per ultimo - ma è il più importante - il tag a (anchor) che determina la 
possibilità o meno di creare collegamenti e quindi determinare la natura di 
ipertesto (ed ipermedia) delle interfacce digitali. 

Regole di scrittura 



l’HTML ha poche ma importanti regole di scrittura fra qui spicca quella di dover 
nidificare correttamente i tag - possono essere scritti uno dentro l’altro ma 
devono aprirsi e chiudere gli uni dentro gli altri senza intersecazioni errate un po’ 
come quando si doveva imparare ad includere le parentesi tonde dentro le quadre 
in un’espessione algebrica [...(.ma soprattutto bisogna imparare che i tag 
(marcatori) possono avere degli attributi a loro volta contraddistinti da un valore 
che contribuiscono a definire funzionalità e semantica dell'elemento marcato, ad 
esempio il semplice codice: 

<a href—"http://www.html.it/">linguaggi per realizzare 
le pagine Web</a> 

mi identifica una frase 'linguaggi per realizzare le pagine web’ che è interessata 
dall’azione del tag (marcatore) a che a sua volta ha un attributo href che a sua 
volta avendo un valore corrispondente ad http : //www .html.it mi 
determina la creazione di un hyperlink al sito web stesso. 




CSS = Layout 

I Cascading Style Sheets - fogli di stile a cascata - è una tecnica che consente di 
introdurre efficacemente ed economicamente (nel senso di razionalizzazione 
delle energie a disposizione) elementi di stile (formattazione grafica o layout). 
Una delle caratteristiche funzionali più importanti dei CSS è la cosiddetta 
ereditarietà ovvero la possibilità di cui gode l'elemento figlio di ereditare 
indicazioni di formattazione grafica dall'elemento padre. 

Regole di scrittura 

Sebbene i fogli stile siano una tecnica MOLTO complessa da padroneggiare, 
alcune sue regole base sono relativamente semplici ed il funzionamento base dei 
css è un tipo di know-how indispensabile per chiunque ha necessità di 
rapportarsi a vario livello rispetto alla progettazione Web. Le regole dei fogli 
stile si applicano a selettori e marcatori attraverso una cosiddetta dichiarazione 
di stile contenente proprietà e valori e quindi il loro funzionamento è 
inscindibile dalla marcatura di tipo html. Gli elementi a cui si applicano gli stili 
possono essere cosiddetti di blocco ovvero che si estendono per intero in 
larghezza (ad esempio come p, table,, hi e h2) oppure in linea ovvero che 
condividono la loro posizione orizzontalmente con altri elementi (ad esempio a, 
img, span o mark). Similmente ai marcatori html i fogli stile sono caratterizzati 
da selettori a cui possono essere associate delle proprietà a cui a loro volta 
possono essere associati dei valori come si può evincere dagli esempi elencati 
sopra. 

I selettori associati ad un determinato marcatore ereditano le proprietà dai 
marcatori nel quale è eventualmente nidificato attraverso regole ben precise: per 
poter attribuire con precisione determinate proprietà di formattazione grafica ai 
marcatori, gli stessi possono essere identificati in maniera univoca tramite un 
identificativo (ID) oppure accorpati in classi (CLASS). L'identificativo ID è 
particolarmente importante in quanto ad esso può essere associato non solo un 
determinato foglio stile, ma anche un punto di ancoraggio (stile attributo name ), 
una funzionalità javascript, un elemento dichiarato object oppure per 
l'identificazione di campi nel caso di estrazioni di dati per un database. 

II selettore id viene richiamato dal simbolo speciale nella dichiarazione di stile e 
si applica a un solo elemento della pagina web, il selettore class viene richiamato 
dal simbolo nella dichiarazione di stile e si può applicare a più selettori o 
marcatori associati alla relativa classe: id e class sono assegnati tramite gli 



omonimi attributi. 


CSS (similmente all'html) è un linguaggio di editing che può essere associato in 
tre maniere diverse: tramite uno stile in linea è possibile determinare lo stile di 
un singolo elemento della pagina web, con lo stile incorporato lo stile di una 
singola pagina Web mentre con lo stile collegato si può virtualmente determinare 
lo stile di un intero sito Web: l'efficienza e la comodità dei risiedono infatti 
anche nella possibilità di comandare lo stile di più elementi e di più pagine web 
facendo riferimento ad una unica regia di stile determinando un notevole 
risparmio in termini di codice e banda. 

Stile in linea 

<p style="color: white; background: black;">Sezione 
testo colore 

bianco su sfondo nero</p> 


Stile incorporato 

1 . <html> <head> <title>Inserire i fogli di stile in 
un documento</title>h6 {color: red; } </head> 

<h6>marcatore html di tipo h6</h6> 

<h6>marcatore html di tipo h6</h6> 

<body> 

marcatore html di tipo h6 

marcatore html di tipo h6 
Stile collegato 

<html> <head> <title>Inserire i fogli di stile in 
un documento come file di testo collegato di tipo 
css</title><link href="../css/base.css" 
rel="stylesheet"x/head> <body> 

Come risultato si ereditano tutte le dichiarazioni di stile presenti nel foglio 
di stile denominato base.css da ricercare nella cartella (dir) css 



JavaScript = Funzionalità 

È un linguaggio di ! scripting che deve il suo nome alla sua sintassi simile 
quella del linguaggio Java comunemente utilizzato per introdurre funzionalità 
nei siti Web, ma ultimamente reso popolare per la realizzazione di app per più 
sistemi operativi in sinergia, ovviamente con i linguaggi html e css. 

Se la conoscenza di questo linguaggio di programmazione travalica le 
conoscenze di chi scrive, ma anche le finalità di questo testo didattico è 
sufficiente saper riconoscere l’eventuale inclusione di un codice javascript nel 
codice sorgente di una pagina Web - alias interfaccia digitale - individuando la 
stringa... 

<script type="text/javascript"> 

all’interno della quale, come vedremo più avanti, è possibile associare 
funzionalità, ad esempio e relativamente alle finalità di questo testo didattico, 
finalizzate a monitorare il comportamento dell’utenza finale su una qualsiasi 
interfaccia digitale. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) una pagina di 
scrittura di prova dei linguaggi html-css-javascript 
https://codepen.io/sandropaganotti/pen/JvepK/ modificando contenuto, e 
variando ed aggiungendo codice di vario tipo: descrivi ed allega il risultato 
ottenuto, prova inoltre ad utilizzare Atom o software a tuo piacimento 
equivalente provando a modificare file html-css-javascript e verificando tramite 
browser l’effetto delle modifiche apportate. 




Mockup e Prototipo 

Alla realizzazione di un wireframe e relativi ipotesi di workflow deve 
necessariamente seguire la fase di mockup ovvero quella del montaggio della 
grafica sulla bozza di interfaccia ipotizzata al fine di valutarne la gradevolezza 
estetica e l’efficacia comunicativa ed a seguire la realizzazione di un prototipo, 
la prima realizzazione operativa dell’interfaccia vera e propria dotata di tutte le 
funzionalità e quindi da testare sotto il profilo anche delle esigenze di usabilità 
precedentemente trattate. 

Per entrambe le funzioni tornano utili i linguaggi del Web, ma soprattutto le 
applicazioni e ancor più i framework e i content management System che sui 
linguaggi del Web sono basati. 

I vantaggi di un CMS Online 

La possibilità di utilizzare un Content Management System per montare la 
grafica su un’idea di interfaccia per poi farla evolvere a livello di prototipo 
(sistema interattivo e pienamente operativo in tutte le sue funzioni pur nella sua 
natura alfa di prima versione ) è una possibilità che ci offre il sistema Web 
offrendoci al tempo stesso - per la sua stessa natura ipertestuale - di metterci in 
relazione con il nostro target di riferimento (o audience-pubblico che dir si 
voglia) e quindi poterne testare l’efficacia. I CMS sono sempre più complessi e 
ricchi di funzione, ma al tempo stesso relativamente semplici da utilizzare: lo 
vediamo utilizzando come esempio uno fra i più apprezzati ed utilizzati al 
mondo... 

Wordpress 

Rispetto all’idea di montare della grafica su un wireframe e farlo evolvere a 
livello di mockup e quindi renderlo interattivo per poterlo definire a pieno titolo 
un prototipo, WordPress è una soluzione open-source - che può essere utilizzata 
sia come free ! hosting su un ! sotto-dominio di https://it.wordpress.com 
(limitato e ospitante pubblicità di terze parti) sia installata su un proprio server 
da https://it.wordpress.org 

Grafica = Temi 

Lo strumento principale offerto da Wordpress per far evolvere il proprio 
wireframe alla natura grafica-comunicativa di Mockup è sicuramente il 
cosiddetto tema ( theme in inglese). Anche se il Web presenta dei limiti di 




rappresentazione (pochi in realtà) è veramente enorme l’offerta di tempiale 
ovvero modelli grafici di partenza che possono essere scaricati da 
https://it.wordpress.org/themes/ oppure selezionabili per il proprio sotto-dominio 
da https://wordpress.com/themes/ 
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La scelta è veramente ampia (anche fra quelli gratuiti-free) potendo filtrare la 
propria scelta rispetto alla tematica trattata, meccanismi di navigazione preferiti, 
tipologie di layout, numeri ed organizzazione delle colonne (ed ovviamente tutto 
può essere adattabile in ottica responsive ), mood grafico da trasmettere. 

Per poter scegliere però consapevolmente è necessario conoscere alcune logiche 
di strutturazione contenuti adottate da WordPress e peraltro replicate similmente 
su qualsiasi cms: i contenuti si dividono fra pagine fisse perlopiù utilizzate nei 
vari menù e post che invece sono articoli con in evidenza la data di realizzazione 
in quanto hanno una funzione principale comunicativa di storytelling. I menù 
sono ampiamente configurabili e quando rappresentati sulla sezione in verticale 
spesso affiancati da possibili innesti informativi o funzionali speciali denominati 
widget. Manco a dirlo tutto può essere personalizzabile salvo conoscere la logica 
di editing html-css. 

Funzionalità = Plugin 

I plugin (estensioni) sono delle funzionalità aggiuntive che possono essere 
aggiunte sul proprio cms ed anche in questo caso l’offerta è limitata 
all’essenziale per la versione free di https://it.wordpress.com/install-plugins/ 
mentre è veramente estesa su https://it.wordpress.org/plugins/ 
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Le funzionalità innestabili sono tra le più varie e spaziano dalle statistiche alle 
procedure di ottimizzazione per i motori di ricerca, dalle questioni di sicurezza e 
backup alla possibilità di mettere in evidenza moduli di contatto oppure 
migliorare la presentazione grafica di post ed immagini. 






... e per le APP? 

Per la progettazione delle app è gioco-forza acquisire conoscenze di 
programmazione, od almeno rapportarsi con chi ha conoscenza di coding 
attraverso un servizio online come MockFlow che può servirci come palestra per 
entrare nei meccanismi di progettazione delle app attraverso meccanismi di 
progettazione visuale e brainstorming; inoltre si può approfittare dell'opportunità 
delle Progressive Web Apps e quindi, di nuovo, dei linguaggi del Web per la 
fruizione del Web ma attraverso un'interfaccia che richiama in tutto e per tutto la 
una modalità app. 

MockFlow 

https://www.mockflow.com è un interessante ambiente di sviluppo visuale che 
predispone alla logica di progettazione delle interfacce app. È un ambiente 
complesso ma ordinato che anche nel suo piano free offre degli strumenti 
decisamente utili suddivisi nelle sezioni... 

Wireframe 


L’interfaccia per cominciare a disegnare un wireframe ma anche dotarlo di 
grafica. Con la sua possibilità poi di esportazione del progetto in modalità 
html(5) lo rende di fatto uno strumento di protodpazione. 
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Annotate 

Un sistema per produrre annotazioni capaci di spiegare con etichette (commenti) 
testuali la funzione di ogni singolo componente progettato. 
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Gmail Mobile Application For Android 

Design Collab 


Una piattaforma per condividere le fasi di sviluppo con un ipotetico team i cui 
singoli componenti possono esprimere pareri e fornire commenti utili al fine di 
approdare a scelte collettive condivise. 
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Sitemap 

Lo strumento per organizzare al meglio l’Architettura dell’Informazione della 
propria interfaccia-app e disegnare di conseguenza quello che MockFlow 
definisce ! UI flows e che in questo testo sono stati definiti workflow. 
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Style Guide 

Le linee guida grafiche del progetto inerenti le scelte di palette di colori, font, 
icone, bottoni, grafici ed eventuali altri elementi (grafici) aggiuntivi ed utili alla 
realizzazione dell’interfaccia-app. 

Progressive Web App 

Le PWA o Progressive Web App è quell'opportunità messa a disposizione dei 
navigatori del nostro sito Web da smartphone di accedere ed usufruire del 
medesimo attraverso un'icona ed interfaccia in tutto e per tutto come fosse 
un'app vera e propria; con il vantaggio di avere contenuti indicizzabili dai motori 
di ricerca, velocità di caricamento, fruizione offline, massima usabilità ed 
ovviamente, interoperabilità tecnologica cross-device senza necessità di doppio 










sviluppo per sistmi Android e iOS. 



Processo di sviluppo 

Il processo di sviluppo di una Web App prevede: 

1. la necessità di avere un certificato https; 

2. nel caso di utilizzo di cms avvalersi di appositi plugin : 

3. creare un file Service Worker sw.js per definire quali file mettere in cahce per una fruizione offline; 

4. creare un file Manifest.json che risulterà utile per 

• titolare l'app 

• assegnare un'icona 

• definire layout ed area display dell'app sullo schermo dello smartphone 

• la pagina di partenza del sito web come prima schermata dell'app. 
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Procedure di controllo 

Creare una Web App significa creare un complesso e delicato sistema interattivo 
che necessita sicuramente di attenzioni e controlli fra cui: 

• puntuali controlli manuali per verificare la sua corretta reperibilità, modalità di rappresentazione sui 
social e corretto funzionamento cross-device; 

• approfittare della specifica sezione audits tramite lo stmmento lighthouse (ispeziona elemento con il 
click destro) del browser Chrome; 

• testare con appositi validatori come WebHint . 





Audits 



Identify and fix common problems that affect your site’s performance,accessibilily,and user experience. 
more 
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Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive circa l’ipotesi progettuale del tuo prototipo. 



Ispirarsi al Material Design per Tusabilità 
deir interfaccia 

Il Material Design di Google 

Acquisite le conoscenze e gli strumenti per sviluppare mockup e prototipi , torna 
prepotentemente alla ribalta la questione su come procedere nella maniera più 
efficace sotto il profilo della funzionalità dell’interfaccia a vantaggio di qualsiasi 
utente e device, in maniera comunicativamente efficace e quindi adottando scelte 
grafiche utili in un’ottica di relazioni internazionali, che poi resta l’opportunità 
più potente introdotta dalla rivoluzione telematica. 

Per tutto questo può venirci in aiuto la proposta di filosofia di Design ideata da 
Google e nota come Material Design ed in particolare le sue linee guida 
https://material.io/design/guidelines-overview/ 

Google e tutti gli altri big del digitale cercano sempre di imporci protocolli e 
standard da rispettare in maniera tale da trasformarci in sussiegosi soldatini al 
loro servizio (dimenticandosi che offrono potenti servizi che possono essere 
pragmaticamente utilizzati al nostro servizio) ma sarebbe da sciocchi non 
prendere in considerazione una serie di consigli ed ipotesi di sviluppo di 
interfacce digitali da parte di chi, da quasi un quarto di secolo, si domanda 
quotidianamente come comunicare efficacemente con miriadi di target diversi e 
su device sempre in evoluzione. Una guida che opportunamente è stata 
recentemente aggiornata prendendo in considerazione anche l' Audio . 





Usabilità alla Google 

Google struttura nelle sue linee guida il principio dell’usabilità in maniera 
bizzarra: lo spalma opportunamente in tutta la guida (essendo l’usabilità il 
prerequisito del buon funzionamento di ogni componente della comunicazione 
digitale) ma crea anche un’apposita sezione Usabilità dove all’interno ci innesta 
la tematica viceversa più ampia e prioritaria dell ’ accessibilità e quella della 
bidirezionalità ovvero l’esigenza di rappresentare correttamente l’informazione 
per quelle lingue orientate da destra verso sinistra. 

In questo paragrafo, viceversa, vedremo quali sono i consigli più interessanti 
delle Material Guidelines orientate ad una ottimale fruizione di un’interfaccia 
digitale (giustamente Google non distingue fra Web ed App...) secondo una mia 
personale analisi critica ed un’esposizione sintetica in lingua italiana (le linee 
guida sono molte complesse ed offerte solo in lingua inglese essendo 
costantemente aggiornate). 

Ma prima di addentrarci su alcuni consigli relativi alle opportunità di 
navigazione di un’interfaccia digitale che rappresenta l’occasione più importante 
per rendere un’interfaccia veramente usabile soffermiamoci su alcuni principi- 
base della filosofia Material Design in termini di usabilità... 

Filosofia touch first 

Pensiamo allo stesso nome Material scelto per queste linee guida: Big G , 
essendo molto interessato ad ottimizzare l’interazione con i dispositivi mobili 
(smartphone ed affini) , vuole promuovere un’idea di design che riesca a 
trasmettere la materialità di ciò che appare a schermo al fine di indurre in 
maniera più convinta ed appagante il gesto del touch sull’icona di turno 
apparentemente tridimensionale e che sembra dire: “toccami toccami “ e questa 
è sicuramente un’ottima impostazione di base molto cali to action. 

Semplicità e sintesi 

Testi e funzioni ridotti al minimo indispensabile nell’ottica di non aggredire e 
confondere l’utente finale, bensì proporgli pagine di atterraggio, meccanismi di 
funzionamento e percorsi più semplici possibili e percepiti anche come più user- 
friendly. 

Chiarezza e massima comprensione 

Tutto deve essere chiaro e comprensibile, l’utente finale NON deve fare nessuna 



fatica a comprendere dove si trova e cosa ha di fronte, altrimenti si corre il 
rischio di perdere l’utente stesso. 

Icone e Colori 

Sì, capisco che sia difficile accostare soprattutto il concetto di colore al concetto 
di usabilità ma l’utilizzo di icone semplici e comunicative e livelli cromatici che 
ben distinguono informazioni e funzioni sono anch’essi funzionali ad 
accompagnare l’utente verso un’esperienza lineare e logica sempre a livello di 
comprensione dell’informazione e delle funzioni a cui si trova di fronte. 



Percorsi e navigazioni 

Bisogna pensare ad organizzare le voci di menù e l’architettura 
dell’informazione più in generale della nostra interfaccia ipotizzando i diversi 
percorsi che un utente finale potrebbe intraprendere per arrivare ad 
un’informazione (od obiettivo-conversione). 

Ad esempio per trovare una canzone posso affidarmi al motore di ricerca interno 
così come indagare sui branimusicli recentemente ascoltati oppure, in maniera 
più sistematica, partire dalle collezioni generali di partenza, per poi scendere 
nelle sotto-categorie come per esempio gli album. 

Menù e chiare opportunità di navigazione 



Il menù cosiddetto hamburger ovvero rappresentato dai famosi tre trattini o 














puntini allineati in verticale è un’ottima e nota opportunità, accolta in maniera 
consapevole da tutta 1‘utenza finale come strumento di navigazione: lo stesso 
utente finale però non è detto che voglia fare lo sforzo di digitare sopra ed è per 
questa ragione che bisogna valutare bene le eventuali voci di menù 
immediatamente visibili così come gli eventuali tab che vengono messi in 
evidenza nella Homepage o da altra ! pagina di atterraggio perché a 
loro è delegata la capacità di comunicare e spiegare all’utente finale dove si 
trova, salvo poi approfondire la navigazione con gli strumenti di navigazione 
interni (menù ad hamburger compreso). 
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Chi cerca trova 

La funzione di ricerca interna è così importante - soprattutto per siti web 
complessi - ai fini di una corretta fruizione di un’interfaccia che, dove non si può 
contare su risorse tecniche interne sufficienti, può essere presa in seria 
considerazione la possibilità di utilizzare una delle varie possibilità offerte dai 
motori di ricerca - tra i quali lo stesso Google c ori https.V/cse.google. it/cse/ - per 
integrare un proprio motore di ricerca interno o custom search engine grazie ad 
un supporto tecnologico esterno. 





























Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive circa i meccanismi di navigazione implementati nel tuo 
prototipo. 



Ispirarsi al Material Design per ^efficacia 
comunicativa 

Google è un grande comunicatore e sicuramente ci offre degli spunti molto 
preziosi in tema di opportunità comunicative anche in merito all’ampio 
panorama di scelte grafiche che abbiamo a disposizione. 

Leggibilità 

È importante realizzare contrasti che consentano al lettore finale di usufruire di 
una buona leggibilità dell’interfaccia nel suo complesso ed in tutte le le sue 
componenti agendo sull’opacità del testo in evidenza e su uno sfondo cromatico 
che consenta un contrasto efficace su qualsiasi schermo e in qualsiasi condizione 
di illuminazione. 



Scelte tipografiche 

In genere viene consigliato un ! font senza grazie maggiormente comprensibile 
a schermo, ma i i font offerti da Google e liberamente utilizzabili sono vari ed 
ognuno in grado di sintonizzarsi ad un certo mood comunicativo: ad esempio per 
esprimere stati d’animo o testimonianze , si può fare riferimento a font con forte 
personalità come gli handwriting. 
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Il vuoto utile 


Fra i tanti non-detti di Google (ma che emerge in maniera evidente in tutti i suoi 
esempi applicativi) vi è l’ampio utilizzo del cosiddetto spazio bianco ovvero di 
ampi spazi lasciati in bianco (vuoti) - detto in gergo spazio bianco ma può essere 
benissimo dello spazio vuoto caratterizzato da altre tonalità cromatica - utilissimi 
per mettere in evidenza degli elementi grafici, tipografici o comunque 
significativamente comunicativi. 

Movimento = Attenzione ? 

Google propone spesso soluzioni che innescano movimenti come occasioni per 
attrarre l’attenzione su determinate aree informative o funzionalità. 



(attenzione vuol dire anche spesso chiamare all'azione ovvero spingere 
all'interazione con l'ultimo elemento oggetto di animazione...) 



l'Immagine è tutto ? 


Se di AUDIO non si parla, il testo deve essere ridotto all’essenziale (ma sarà poi 
vero?) e rispettare precise regole all’insegna della comprensibilità e della 
semplicità e le animazioni attirano l’attenzione, che dire delle immagini? 
L’IMMAGINE è tutto secondo Google e sia essa una illustrazione o una 
fotografia (assegna ad entrambe medesimo valore funzionale-comunicativo) Big 
G è prodigo di utili consigli quali... 

Informativa e non decorativa 

L’immagine deve piacere ed essere gradevole, ma non per questo esteticamente 
fine a sé stessa, ma al contrario sempre portatrice d’informazione utile e 
complementare al testo ai fini della comprensione della comunicazione nel suo 
complesso che vogliamo trasmettere. 



Learn from anywhere 













Non solo informativa, ma dotata di focus informativo 

L’immagine non solo deve essere informativa ma avere un focus informativo: 
una porzione di sé particolarmente significativa che, in caso di 
ridimensionamento in senso ! responsive, possa essere riprodotta in maniera 
utile: dunque una porzione di forma cerchio o quadrato della medesima in cui sia 
contenuto l’elemento maggiormente espressivo e che possa quindi così essere 
rappresentativa su device di tipo diverso una volta opportunamente ritagliata- 
ridimensionata. 






Con capacità di storytelling 

L’immagine deve saper raccontare ovvero deve poter rappresentare una storia o 
far parte di di un racconto perché solo così si può riuscire a colpire l’attenzione e 
l’immaginazione del nostro lettore. 
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INGREDIENTE DIRECTIONS 





Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer) le tue scelte 
progettuali definitive circa le immagini ed altri eventuali oggetti multimediali 
(audio e video) implementati nel tuo prototipo. 



Ispirarsi al Material Design per un approccio cross- 
cultural e cross-device 

Stai progettando un’interfaccia digitale per esseri umani oppure per entità 
artificiali? Sembra una domanda peregrina o provocatoria, ma in realtà sul Web 
le statistiche dimostrano che oltre la metà dei visitatori è costituito da ! bot 
sotto le varie forme di automatismi buoni (quelli utilizzati comunemente dai 
motori di ricerca per intendersi) ma anche ! scraper ed altre maliziose 
creature. In definitiva se siamo naturalmente propensi a progettare per esseri 
umani in un’ottica di User eXperience è certo che la maggior parte dei nostri 
interlocutori sul Web così come nelle altre pieghe del ! cyberspazio è 
costituito da entità artificiali in qualche maniera senzienti ed in ogni caso 
sensibili e reattive alle nostre scelte di design (che dunque dovrebbe definirsi per 
maggiore precisione !(A)UX Design - per chi non l’avesse intuito e non ha 
voglia di andare a leggere il glossario - A sta per Artificial). 

In questo capitolo si cerca sottendere la doppia valenza di una buona 
progettazione digitale capace di accontentare le esigenze di esseri umani con 
diverse esigenze - nel caso specifico con diversa origine linguistica-culturale - e 
quella di dispositivi anche loro caratterizzati da esigenze diverse - nel caso 
specifico con diversa dimensione e risoluzione dello schermo. 

Esigenze Cross Cultural 

Google in realtà le esigenze di internazionalizzazione le raccoglie principalmente 
nel paragrafo Bidirectional e si limita a prendere in considerazione le esigenze di 
quelle culture (poche in realtà) portatrici di una tradizione di lettura e scrittura da 
destra verso sinistra. In realtà esistono molte altre criticità - ed al tempo stesso 
opportunità comunicative - da prendere in considerazione per chi vuole 
valorizzare il proprio design a livello internazionale e fra le tante vale la pena 
segnalare - anche se non affrontate da sua maestà Google... 

• esigenze di design legate a caratteristiche climatiche locali: per esempio nel 
profondo nord dove fa molto freddo bisogna tenere di conto dell’utilizzo di 
guanti e quindi realizzare interfacce dove il touch sia possibile effettuarlo su 
funzioni-aree distinte e non troppo adiacenti dell’interfaccia; 

• fare attenzione alle traslitterazioni fonetiche di parole e brand e controllare 
sempre il significato finale: anche i grandi hanno commesso gaffe in 



passato come nel caso bite thè wax tadpole della Coca Cola : 

simboli e segni possono avere valenze del tutto diverse a seconda delle 
diverse culture (così come i colori peraltro) per cui è decisamente 
importante non fare gaffe culturali: per esempio McDonald ‘s dopo attenta 
riflessione ha deciso di escludere le ossa dal suo set di icone universali per 
rappresentare la sostanza-calcio per non urtare la sensibilità delle persone di 
cultura musulmana di alcune regioni che considerano i cani come esseri 
repellenti ed impuri; 

vi possono essere poi motivi di sicurezza, legali o politici per cui 
determinati servizi sono disabilitati - ed essendo app e siti Web dei nodi 
ipertestuali è un aspetto ovviamente fondante per le proprie sorti 
comunicative: per esempio Facebook e Google hanno problemi di 
operatività in Cina ed allora perché far finta che non esistano motori di 
ricerca come Bing-Baidu-Yandex-Naver oppure social come WeChat-Vk che 
a livello internazionale e soprattutto in alcune regioni specifiche sono la 
scelta prioritaria per l’utenza finale? 

sempre a livello relazionale molte culture hanno i nomi strutturati in 
maniera molto complessa ed allora predisporre moduli di contatto che 
prevedono tre campi (e non i nostri soliti due per nome e cognome) 
sicuramente può trasmettere una sensazione di accettazione e 
consapevolezza in termini di comunicazione internazionale. 







Given name & patronymic 


Lastrame 

« 

Bjork Gudmundsdóttir 



/ \ 

Given name , . 

Father s name 

You cali her: 

• Bjork 

• Bjork Guómundsdóttir 

(sa bin Osman 



/ 1 \ 

Given name 'son of’ . . 

Father s name 

You cali him: 

• Mr. Isa 

• Encik Isa 



A proposito, io volutamente ho privilegiato il termine cross-cultural ma è 
importante prendere consapevolezza di altri due termini comunemente utilizzati 
che sono internazionalizzazione (da intendersi come tutte quelle iniziative ed 
accorgimenti utili per comunicare a livello internazionale) e localizzazione (da 
intendersi come tutte quelle iniziative ed accorgimenti utili per adattare una 
comunicazione ad una specifica e locale tipologia linguistica e culturale). 

Per esempio dotare un sito web di versioni linguistiche quanto più numerose 
significare internazionalizzare, mentre sostituire i broccoli con i peperoni verdi 
nel cartone animato Inside Out per trasmettere la sensazione del disgusto ai 
giapponesi vuol dire localizzare. 









Visione RTL 


RTL significa da destra verso sinistra (in inglese) mentre LTR, come avrete 
intuito, da sinistra verso destra: non è solo una impostazione linguistica di lettura 
e scrittura di alcune culture come quella araba o quella ebraica ma si riflette, 
ovviamente, in uno schema mentale di percezione ed utilizzo dell’interfaccia per 
cui - quanto meno all’interno di un’esperienza vissuta all’interno del proprio 
bagaglio culturale di provenienza - si è abituati a porre attenzione a destra dove 
vi è /’ inizio. Provate a vedere in successione le visioni diverse prima LTR e poi 
RTL di https://maktoob.yahoo.com e vi renderete conto di come tutto lo schema 
informativo viene ribaltato specularmente - menù/immagini/loghi - grazie 
all’implementazione dell’attributo rtl nel codice sorgente. 
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Ben Stokes: England all-rounder has ’suffered enough 
punishment', says Michael Vaughan 

Former England captain Michael Vaughan says Ben Stokes has "suffered enough 
punishment" and has backed thè all-rounder's return to thè England squad. Stokes 


aktoob.yahoo.com •••©#& Cerca lll\ Q iS ^ OD ^ $ = 

GettingStarted @ ChineseText Input @ vacanze studio 2013:... © Mobile Perf © Farfalla bookmarklet Hi ANDI-Installation 


Jl^? Maktoob Enylish JIa^I ^ JL© © I jo^ts^ll Inj ^ jj y a»ihi^Jl ^ 11 


Q. 


YAHOO/ 


Jl^9 JLxl 3 JLo 0^1? auaL^JI jlu>VI A. Q 


elio, TC 


21‘ 30° 



OjI^I - J" j LxJ I (LuL I njj -3t i . m . il '.«a£- Ij^JI » 

oljlDAT à IK i>lf> «jùxJ l|ù 7 100-1 jjLo I JJLUJ 

u! -iti j I ó j\ Jj /Aulì OxXliJI .*IjJI ìjS- Aob jJI Jl9 Ifioìlm aS^UL jULaJI <u/l»aJ 



unicef! 0 > 















Eccezioni 


Solo alcuni elementi continuano ad essere comunque scritti in LTR come i 
numeri e testo non tradotto. 


DTIJlp 


Phone Number 

( 212 ) 665-8945 


Per gestire correttamente ciò che non deve essere tradotto neanche da 
automatismi e ciò che deve mantenere un orientamento opposto a quelle 
dell’ambiente in cui è ospitato è necessario approfittare rispettivamente 
dell’ attributo notransiate così come deH’attributo bidirectional. 







Esigenze Responsive 

I dispositivi che accedono ad un’interfaccia digitale necessitano di interpretare 
layout e contenuti in maniera ottimizzata relativamente al proprio corredo 
tecnologico, dimensioni e ! risoluzione ed il tutto, ovviamente, a vantaggio 
degli utenti che ne usufruiscono: questo è il principio-base del cosiddetto 
Responsive Design. 

Breakpoint e griglie 

Google si limita - a livello di responsive design - alla necessità di individuare 
breakpoint ed adattare di conseguenza griglie di layout. 



In pratica vengono monitorate costantemente le metriche dei device dopodiché 
relativamente al loro orientamento landscape (orizzontale come un paesaggio) 
oppure portrait (verticale come un ritratto) vengono definiti quali sono i punti di 
rottura dei px (pixel) in corrispondenza dei quali viene fornito un layout diverso 
ovvero con una griglia che ha margini esterni, colonne e spazi fra colonne 
adatti come numero e dimensioni al dispositivo che visualizza ed interpreta la 
pagina o schermata dell’interfaccia in uso. In ambito Web questo si ottiene 
grazie alla tecnica CSS nota come media queries . 

Altri accorgimenti 

In realtà, soprattutto in ambito Web possono esserci ulteriori accorgimenti quali: 

• in caso di layout particolarmente semplici è possibile utilizzare misure 
relative come le misure in % che si adattano automaticamente alla larghezza 
dello schermo; 

• utilizzare immagini SVG ovvero di tipo Scalar Vector Graphics che sono in 
grado di aumentare a dismisura le proprie dimensioni senza perdita di 
risoluzione; 

• sempre per le immagini utilizzare la proprietà CSS max-with che consente 
l’ingrandimento delle immagini ma non oltre la loro massima dimensione 






naturale al fine di evitare fenomeni di degradamento della loro 
visualizzazione; 

• controllare il viewport ovvero che l’area visibile sia settata secondo le 
dimensioni del device in uso attraverso il seguente semplice meta tag 

<meta name="viewport" content="width=device-width" /> 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive per adattare il tuo prototipo ad esigenze sia cross-device 
che cross-cultural. 



Analytics e valutazioni post-produzione 

Alla fine dei giochi (ni caso della produzione della nostra interfaccia) possiamo 
dire di essere stati dei bravi progettisti? La risposta spetta solo all’utenza finale; 
ma possiamo contribuire a strutturare tecnicamente questa valutazione di terzi 
attraverso strumenti tecnologici e procedure di analisi. Vediamo quali... 

Aspetti quantitativi = Statistiche 

Quale sia l’ambito ed il linguaggio tecnologico di pertinenza della nostra 
interfaccia digitale la prima questione consiste nel cercare di capire quanti sono 
gli utenti che ci visitano periodicamente e per fare questo è opportuno utilizzare 
gli strumenti più sicuri e semplici che possano esistere: in ambito Web è 
sicuramente opportuno implementare statistiche lato server magari attraverso 
software open-source come AWStats . 



Aspetti qualitativi = Analytics 

Quasi sempre si sente la necessità di capire come si sta comportando la nostra 
utenza sul Web dal momento stesso in cui atterra (da dove arriva?) fino 
all’auspicata conversione. 

Che sia ambito Web oppure che siano app o social, sono le Analytics a svelarci 
tutto ciò che potete immaginare del comportamento della vostra utenza. Vediamo 
insieme alcune opportunità tecnologiche molto interessanti. 

Google Analytics 

Google Analytics è la soluzione più celebre al mondo e sicuramente offre visioni 
molto articolate. È in grado di monitorare app e siti Web andando ad evidenziare 
aspetti molto particolareggiati del comportamento dell’utenza finale. Per quanto 
riguarda il Web il procedimento per usufruire dei suoi servizi (similmente alle 
altre Web Analytics) è molto semplice in quanto consiste nel crearsi un account 
ed implementare su tutte le pagine Web da monitorare un apposito (java)script . 

Fra le tantissime visioni utili di Google Analytic,s una spesso disattesa - ma in 
realtà fra le più interessanti - consente di vedere il flusso di utenti che attraversa 
l’interfaccia monitorata ovvero il percorso degli utenti (in % sul totale) lungo 
tutta l’interfaccia fino ad arrivare a conversioni opportunamente indicate (per 
esempio l’acquisto di un prodotto oppure la visione della pagina dei contatti). 


Starting pages Ist Interaction 

4S.7K Mestone, 24K drop-offe 24.6K sessione, 4.72K drop-offe 



Matomo 

Una soluzione particolarmente interessante per le pubbliche amministrazioni, 
essendo una soluzione open-source e permettendo dunque la possibilità di 
installare sul proprio server il software di monitoraggio senza regalare (pensate 
alle esigenze di riservatezza di siti sanitari o militari...) a terze parti report 
dettagliati sulla propria utenza così come succede con le altre Web Analytics che 
funzionano tramite script e trasmissione dati a ! server altrui. 



Dashboard 


<*> Visitors 

4 Behaviour 
□ Acquisitori 

OverView 

All Referrers 

Search Engines & 

Keywords 

Websites 

Social Networks 

Yandex Metrica 

Il potente motore di ricerca russo offre quello che forse è lo strumento più 
performante a livello di Analytics sia per app che per siti Web: è fra i pochissimi 
ad offrire la visione di ! mappe di calore ma soprattutto fra le tante 
caratteristiche innovative vi è quella che consente di ricostruire attraverso video 
denominati session replay il comportamento dell’utenza finale dalla pagina di 
atterraggio alla conclusione della visita o all’ottenimento di un’eventuale 
conversione opportunamente configurata. Strumento innovativo che offre visioni 
all’avanguardia ed utili pur mantenendo una semplicità d’interfaccia invidiabile. 



Ambito Social 

Le Analytics esistono anche per i social: Twitter le chiama proprio Analytics 
mentre Facebook Insights . In entrambi i casi le analytics per i social vanno 
soppesate con cura perché le metriche offerte sono molto illusorie: inutile gioire 
perché decine di migliaia di account hanno visto un nostro annuncio se 
pochissimi poi ci hanno interagito così come prima di festeggiare per la visione 
da parte di tantissime persone di un nostro video bisogna prima verificare che la 
gran parte delle persone non lo abbia abbandonato dopo una manciata di 
secondi! 


Visitors in Real-time 



Visitor Map 



DATE 

VISITS 

ACTIONS 

VA 



Last 24 hours 

41 

61 




Last 30 minutes 

1 

1 
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Testi di Usabilità 


Un approccio molto serio per valutare come viene usufruita la nostra interfaccia 
è quella di coinvolgere una parte dell’utenza finale ad eseguire task (compiti) 
con obiettivi ben precisi - “cerca di trovare tale informazione” - e farsi 
resocontare - magari attraverso modulistica precompilata - in quanti passaggi e 
con quale tipo di difficoltà è stato raggiunto il risultato. 

Puoi trovare ispirazione dal modulo pre-impostato da it designers Italia 
https://designers.italia.it/kit/usability-test/ 




Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) come pensi di 
valutare tecnicamente (e con quali procedure) le interazioni sul tuo prototipo dal 
momento in cui sarà utilizzato dal tuo target di riferimento. 



Glossario delle Iparole chiave Abracadabra 

!analytics 

Le Analytics sono sistemi informatici di tracciamento che possono ricostruire nei 
minimi dettagli il comportamento dell’utenza finale che sta utilizzando un app 
oppure un sito Web 

!(A)UX Design 

immodestamente sono stato fra i primi (ma forse anche il primo) ad utilizzare 
questa terminologia che significa la capacità di progettare interfacce digitali al 
fine di accontentare più possibile le esigenze di entità artificiali come hot, 
assistenti vocali eccetera. 

! bot 

Robot deriva da una parola di origine ceca che significa “lavoro pesante” e 
sottintende all’utilizzo di macchinari più o meno intelligenti che svolgono lavori 
pesanti al nostro posto, bot sono l’equivalente in ambito informatico-telematico 
anche se la loro caratteristica maggiore non è tanto quella di svolgere lavori 
‘pesanti’ ma in maniera incessante e senza soluzione di continuità nel tempo. 

!cross-mediale 

cross-mediale o cross-media sottintende ad un tipo di esperienza comunicativa 
digitale che coinvolge in simultanea oppure in maniera sequenziale dispositivi 
diversi per grandezza, risoluzione o corredo tecnologico 

! cyberspazio 

il web ed internet, ma anche qualsiasi spazio digitale che ipoteticamente può 
essere messo in connessione con altri sistemi e spazi digitali: ecco cos’è il 
cyberspazio 

!debugger 

i bug sono gli scarafaggi ovvero gli errori ed un debugger è un umano o una 
procedura anche automatizzata alla ricerca di scarafaggi, pardon,errori 

! font 

insieme di caratteri tipografici (glifi) caratterizzati e accomunati da un medesimo 
stile grafico 



Iframework 

piattaforme che a livello sovrastrutturale rendono ottimale e comodo l’utilizzo di 
determinati linguaggi e librerie informatiche 

! hosting 

la possibilità di essere ospitati (host= ospite) su un server usufruendo di alcuni 
servizi resi a disposizione 

! logo 

un grafo che rappresenta un’identità aziendale, collettiva od istituzionale: 
tipicamente rappresentato da un’icona-simbolo e da un nome o delle lettere può 
essere peraltro limitato al solo disegno o al solo brand (nome-sigla) tipizzato 
opportunamente 

•mappe di calore 

le mappe di calore sono rappresentazioni grafiche di aree di schermo utilizzate 
dall’utenza finale dove, classicamente, le aree più utilizzate tendono al rosso¬ 
viola e quelle meno utilizzate al verde-blu 

! motori di ricerca 

un motore di ricerca è una complessa struttura tecnologica che ha le seguenti 
componenti tecnologiche autonome: interfaccia grafica di interrogazione, spider- 
bot che raccoglie le informazioni (sul Internet), data-base dove viene raccolta 
l’informazione, algoritmo che presenta le risposte alle interrogazioni 
indicizzando in maniera ottimizzata l’informazione contenuta nel data-base e 
quindi ordinandola efficacemente sulla pagina di risposta 

!Open Source 

Software il cui codice sorgente è liberamente accessibile al fine di ottimizzare le 
pratiche di libero accesso (anche per motivi di sicurezza) e libera condivisione 
della conoscenza (informatica) 

Spagina di atterraggio 

si intende per pagina di atterraggio qualsiasi pagina che può usufruire di una 
nuova visita da parte di un utente da qualsiasi sorgente di provenienza: può 
essere una visita diretta, oppure provenire da social o motori di ricerca o ad altro 
tipo di referrai ovvero pagina da cui è collegata o può generare comunque una 
visita 

! parole chiave Abracadabra 



una '.parola chiave Abracadabra è un tag specifico per identificare un’entità in 
maniera univoca ed utile all’interno della filiera della comunicazione digitale ed 
in particolare se utilizzata sui motori di ricerca capace di far accedere ad un 
tesoro informativo particolarmente significativo 

!repository 

archivi dove sono depositate, raccolte ed opportunamente indicizzate e 
catalogate risorse utili quali ad esempio opere d’arte digitali oppure software di 
vario tipo 

! responsive 

la capacità di un media (di solito un’immagine ma può anche essere un testo o 
un video) di potersi adattare alle diverse caratteristiche in termini di dimensioni, 
risoluzioni o corredo tecnologico di un dispositivo digitale 

! risoluzione 

vi sono diverse tipologie di risoluzioni e densità che possono caratterizzare la 
resa a schermo (più o meno di qualità) ma l’interpretazione più diffusa è quella 
della quantità di pixel per cui può essere suddiviso lo schermo, ad esempio 
800x600 

!screen-reader 

i lettori di schermo sono software che si interfacciano al normale funzionamento 
di un desktop computer o di uno smartphone ma trasformano tutta 
l’informazione (testuale) che riescono a comprendere in output vocale o braille 
ovvero lo speciale alfabeto tattile pensato per le persone non vedenti 

! scraper 

gli scraper sono i hot che senza avvisare o chiedere il permesso ad alcuno 
raccolgono informazioni su piattaforme-dati altrui per poi poterli riutilizzare a 
proprio vantaggio di solito col fine ultimo di rivendere software od informazioni 
a costo zero 

! scripting 

linguaggio di programmazione 

! server 

il server serve ovvero similmente ai bot è sempre lì pronto a rispondere a 
chiunque (semplice utente denominato client ) sia abilitato a ricevere i suoi 



servigi: ad esempio Apache è un popolarissimo server Web open-source che ci 
permette di usufruire di gran parte delle pagine web che visitiamo tutti i giorni 

•sistema operativo 

un (insieme di) software che fa funzionare un computer secondo una filosofia di 
sviluppo informatico condivisa da una comunità o dettata da un’azienda 
informatica (esempi Linux, Windows, Mac OsX) 

! sotto-dominio 

i domini web si scrivono da destra verso sinistra iniziando con un suffisso 
istituzionalmente definito per proseguire con un dominio di fantasia ed eventuali 
sotto-domini sempre scelti come nome a proprio piacimento (sempre se 
disponibili) ad esempio: sottodominio.dominio.net 

! tag 

i tag sono quei marcatori - ad esempio nel linguaggio html identificabili dai 
segni di apertura e chiusura parentesi angolare <> - che determinano 
l’assegnazione di particolare entità semantica al quale può essere associata, 
anche tramite altri linguaggi, valore strutturale, di layout oppure di funzionalità 

!UI 

Come mi è un po’ un mantra per i linguaggi appunto di tipo markup-Zanguage 
coi la U che sta per User è utilizzata per diversi acronimi inerenti il rapporto fra 
utenza finale ed intefaccia ed in questo caso specifico User Interface. 

! UX 

User eXperience ovvero l’esperienza utente che si può avere su un’interfaccia 
digitale con più o meno soddisfazione. 



